<template>
  <div class="intergral_set_wrapper">
    <div class="title">积分设置</div>
    <div class="inputline">
      <div class="line_type" id="markinput">
        <label>标注积分系数</label>
        <input style="width:80px;" type="tel" @input="changecoe('mark')" v-model="score.mark.coe" name="" placeholder="积分系数" v-if="!batchEdit"/>
        <input style="width:80px;" type="tel" @input="changecoe('mark')" v-model="score.mark.coe" name="" placeholder="积分系数" readonly v-else/>
        <span class="jx" v-show="markTransfinite">积分超限</span>
      </div>
      <div class="line_type">
        <label>标注积分公式</label>
        <input style="width:250px;" type="text" :value="score.mark.formula" readonly="" placeholder="积分方式" />
      </div>
      <div class="line_type">
        <div class="checktype">
          <span @click="scoreMarktotal" :class="{'checked':score.mark.total}">总条数</span>
          <span @click="scoreMarktotal" :class="{'checked': !score.mark.total }">字数</span>
          <span @click="scoreMarkcorrect" :class="{' checked ':score.mark.correct}">正确率</span>
        </div>
      </div>
    </div>
    <div class="inputline" v-show="checkStatus">
      <div class="line_type" id="checkinput">
        <label>检查积分系数</label>
        <input style="width:80px;" type="tel" @input="changecoe('check')" v-model="score.check.coe" placeholder="积分系数" v-if="!batchEdit">
        <input style="width:80px;" type="tel" @input="changecoe('check')" v-model="score.check.coe" placeholder="积分系数" readonly v-else>
        <span class="jx" v-show="checkTransfinite">积分超限</span>
      </div>
      <div class="line_type">
        <label>检查积分公式</label>
        <input style="width:250px;" type="text" :value="score.check.formula" readonly="" placeholder="积分方式" />
      </div>
      <div class="line_type">
        <div class="checktype">
          <span @click="scoreMarktotal" :class="{'checked ':score.mark.total}">总条数</span>
          <span @click="scoreMarktotal" :class="{' checked ': !score.mark.total }">字数</span>
        </div>
      </div>
    </div>
    <div class="reason" v-show="textareaStatus!=0">
      <label>超限原因</label>
      <textarea v-model="textareaValue" maxlength="40" placeholder="请输入超限原因"></textarea>
    </div>
    <div class="conten_item">
      <div class="radioitem">
        <label>是否积分换算</label>
        <ul class="radio">
          <li @click="changeEC(true)" :class="{'selected':exchangeStatus==true}">是</li>
          <li @click="changeEC(false)" :class="{'selected ':exchangeStatus==false}">否</li>
        </ul>
      </div>
      <div class="checkhide" v-show="exchangeStatus">
        <div class="hideline">
          <label>积分换算比例</label>
          <div class="typeli">
            <input v-model="exchangeVal" v-if="!batchEdit"/>
            <input v-model="exchangeVal" v-else readonly/>
            <i style="width:250px;">({{exchangeVal}}条坏数据积分等于1条好数据积分)</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'integralSet',
  props: {
    comInfo: {
      type: Object,
      default: () => ({})
    },
    batchEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      taskId: '',
      score: {
        mark: {//标注积分
          coe: "",//积分系数
          formula: "",//积分方式
          total: true,//总条数
          correct: false,//正确率
          wordNum: false,// 是否按字数
          max: "",
          min: "",
        },
        check: {
          coe: "",
          formula: "",
          total: true,
          correct: false,
          min: "",
          max: ""
        }
      },
      checkStatus: false, //是否检查
      markTransfinite: false, // 标注积分超限
      checkTransfinite: false, // 检查积分超限
      textareaStatus: 0, //0:未超限，1:超限 显示原因
      textareaValue: "",
      exchangeStatus: true, //是否积分换算
      exchangeVal: 1, //积分换算比例
      // 组件间事件传递
      vueEventArr: [{
        name: 'batchSetIsCheck',
        h: this.batchSetIsCheck
      }]
    }
  },
  created() {
    // self = this;
    // vue组件通信事件绑定
    this.vueCustomEvent('on');
  },
  beforeDestroy() {
    this.vueCustomEvent('off')
  },
  mounted() {
    let urlArgs = this.Utils.getQueryStringArgs()
    this.taskId = urlArgs["taskId"];

    this.changecoe("mark");
    this.changecoe("check");

  },
  watch: {
    comInfo: {
      handler(val) {
        if (!val) return;
        let data = this.$data
        Object.keys(data).forEach(key => {
          if (val.hasOwnProperty(key)) {
            this[key] = val[key]
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    changeEC: function (flag) {
      if(this.batchEdit) return;
      this.exchangeStatus = flag;
      if (!flag) {
        this.exchangeVal = 1;
      }
    },
    scoreMarkcorrect: function () {
      if(this.batchEdit) return;
      if (this.score.mark.correct) {
        this.score.mark.correct = false;
      } else {
        this.score.mark.correct = true;
      }
      this.formula("mark");
    },
    scoreMarktotal: function () {
      if(this.batchEdit) return;
      if (this.score.mark.total) {
        this.score.mark.total = false;
        this.score.check.total = false;
      } else {
        this.score.mark.total = true;
        this.score.check.total = true;
      }
      this.formula("mark");
      this.formula("check");
    },
    //获得标注积分计算方式
    formula(type) {
      if (type == "mark") {
        let s = "",
          x = "",
          y = "";
        if (this.score.mark.coe != "") {
          s = this.score.mark.coe;
        }
        if (this.score.mark.total) {
          x = "*总条数";
        }
        if (this.score.mark.correct) {
          y = "*正确率";
        }
        this.score.mark.formula = s + x + y;
      } else {
        let s = "",
          x = "",
          y = "";
        if (this.score.check.coe != "") {
          s = this.score.check.coe;
        }
        if (this.score.check.total) {
          x = "*总条数";
        }
        if (this.score.check.correct) {
          y = "*正确率";
        }
        this.score.check.formula = s + x + y;
      }
    },
    //监听积分设置input
    changecoe: function (type) {
      if (this.score.mark.coe == "" && this.score.check.coe == "") {
        this.textareaStatus = 0;
        this.textareaValue = "";
        this.markTransfinite = false // 标注积分超限 tip
        this.checkTransfinite = false // 检查积分超限 tip
      } else {
        if (type == "mark") {
          this.ass_api.listenIntegral({
            taskid: this.taskId
          }).then(data => {
            if (!data) return;
            var _data = eval('(' + data.score + ')');
            var markmin = Number(_data.mark.min);
            var markmax = Number(_data.mark.max);
            var markcoe = Number(this.score.mark.coe);
            var checkmin = Number(_data.check.min);
            var checkmax = Number(_data.check.max);
            var checkcoe = Number(this.score.check.coe);
            this.score.mark.min = markmin;
            this.score.mark.max = markmax;
            this.score.check.min = checkmin;
            this.score.check.max = checkmax;
            if (markmin == 0 && markmax == 0 && checkmin == 0 && checkmax == 0) {
              this.score.mark.coe = 0;
            } else {
              if (this.score.mark.coe != "") {

                if (markcoe > markmax || markcoe < markmin) {
                  this.textareaStatus = 1;
                  this.markTransfinite = true // 显示积分超限 tip
                } else {
                  this.markTransfinite = false // 隐藏积分超限 tip

                  if (this.checkStatus && checkcoe != "") {
                    if (checkcoe > checkmax || checkcoe < checkmin) {
                      this.textareaStatus = 1;
                      this.checkTransfinite = true // 显示积分超限 tip
                    } else {
                      this.textareaStatus = 0;
                      this.textareaValue = "";
                    }
                  } else {
                    this.textareaStatus = 0;
                    this.textareaValue = "";
                  }

                }

              } else {
                this.markTransfinite = false // 隐藏积分超限 tip
              }
            }
          })
        } else {
          this.ass_api.listenIntegral({
            taskid: this.taskId
          }).then(data => {
            var _data = eval('(' + data.score + ')');
            var markmin = Number(_data.mark.min);
            var markmax = Number(_data.mark.max);
            var markcoe = Number(this.score.mark.coe);
            var checkmin = Number(_data.check.min);
            var checkmax = Number(_data.check.max);
            var checkcoe = Number(this.score.check.coe);
            if (markmin == 0 && markmax == 0 && checkmin == 0 && checkmax == 0) {
              this.score.check.coe = 0;
            } else {
              if (this.score.check.coe != "" && this.checkStatus) {

                if (checkcoe > checkmax || checkcoe < checkmin) {
                  this.textareaStatus = 1;
                  this.checkTransfinite = true // 显示积分超限 tip
                } else {
                  if (markcoe != "") {
                    if (markcoe > markmax || markcoe < markmin) {
                      this.textareaStatus = 1;
                      this.markTransfinite = true // 显示积分超限 tip
                    } else {
                      this.textareaStatus = 0;
                      this.textareaValue = "";
                    }
                  } else {
                    this.textareaStatus = 0;
                    this.textareaValue = "";
                  }
                  this.checkTransfinite = false // 显示积分超限 tip
                }
              } else {
                if (markcoe != "") {
                  if (markcoe > markmax || markcoe < markmin) {
                    this.textareaStatus = 1;
                    this.markTransfinite = true // 显示积分超限 tip
                  } else {
                    this.textareaStatus = 0;
                    this.textareaValue = "";
                  }
                } else {
                  this.textareaStatus = 0;
                  this.textareaValue = "";
                }
                this.checkTransfinite = false // 显示积分超限 tip
              }
            }
          })
        }
      }
      this.formula(type);
    },
    vueCustomEvent(type) {
      this.vueEventArr.forEach(ev => {
        if (!ev.name || !ev.h) return;
        this.$bus[`$${type}`](ev.name, ev.h);
      })
    },
    batchSetIsCheck(flag) {
      console.log(12312312312837, flag)
      this.checkStatus = flag;
      this.changecoe("mark");
      this.changecoe("check");
    },
    // 校验
    validate() {
      let reg = /^[0-9]*[1-9][0-9]*$/; //正整数
      let regdec = /^([1-9]\d*|0)(\.\d{1,3})?$/; //3位小数验证
      if (this.exchangeStatus && !reg.test(Number(this.exchangeVal))) {
        this.ui.fade("积分换算比例必须小于等于5000的正整数");
        return false;
      } else if (this.exchangeStatus && Number(this.exchangeVal) > 5000) {
        this.ui.fade("积分换算比例必须小于等于5000的正整数");
        return false;
      } else if (this.score.mark.coe == "" && this.score.mark.coe != 0) {
        this.ui.fade("请输入标注积分设置");
        return false;
      } else if (this.score.mark.coe < 0) {
        this.ui.fade("标注积分不能小于0");
        return false;
      } else if (!regdec.test(this.score.mark.coe)) {
        this.ui.fade("标注积分为最多3位小数的数字");
        return false;
      } else if (this.checkStatus && this.score.check.coe == "" && this.score.check.coe != 0) {
        this.ui.fade("请输入检查积分设置");
        return false;
      } else if (this.checkStatus && this.score.check.coe < 0) {
        this.ui.fade("检查积分不能小于0");
        return false;
      } else if (this.checkStatus && !regdec.test(this.score.check.coe)) {
        this.ui.fade("检查积分为最多3位小数的数字");
        return false
      } else if (this.textareaStatus == 1 && this.textareaValue == "") {
        this.ui.fade("请输入超限原因");
        return false;
      }
      return true;
    },
    // 外部获取当前组件的值 
    getComponentVal() {
      return {
        type: 'spec',
        value: {
          score: this.Utils.deepCopy(this.score),
          markTransfinite: this.markTransfinite, // 标注积分超限
          checkTransfinite: this.checkTransfinite, // 检查积分超限
          textareaValue: this.textareaValue,
          exchangeStatus: this.exchangeStatus, //是否积分换算
          exchangeVal: this.exchangeVal, //积分换算比例
          textareaStatus : this.textareaStatus , // 展示积分超限输入框
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
button,
input,
select,
textarea {
  font-size: 14px;
}
.intergral_set_wrapper {
  .title {
    color: #5e6a68;
    font-size: 16px;
    font-weight: 700;
    line-height: 48px;
    display: block;
    position: relative;
    padding-left: 14px;
    margin-top: 10px;
    &::before {
      position: absolute;
      left: 0;
      top: 17px;
      width: 4px;
      height: 15px;
      display: block;
      background: #07d569;
      content: "";
    }
    p {
      padding: 5px 23px;
      display: inline;
      font-size: 12px;
      font-weight: normal;
      color: #e07900;
    }
  }
  .inputline {
    line-height: 34px;
    margin-bottom: 16px;
    #checkinput span {
      position: absolute;
      left: 220px;
      top: 2px;
      color: red;
      width: 70px;
      font-size: 12px;
      &::before {
        content: none;
      }
    }
    #markinput span {
      position: absolute;
      left: 220px;
      top: 2px;
      color: red;
      width: 70px;
      font-size: 12px;
      &::before {
        content: none;
      }
    }

    label {
      width: 129px;
      display: inline-block;
      font-size: 14px;
      color: #666;
      text-align: right;
      padding-right: 10px;
      input {
        border: 1px solid #ececec;
        padding: 9px 10px;
        font-size: 14px;
        line-height: 14px;
        width: 148px;
        display: inline-block;
      }
      .checktype {
        display: inline-block;
        margin-left: 10px;
      }
    }
    input {
      border: 1px solid #ececec;
      padding: 9px 10px;
      font-size: 14px;
      line-height: 14px;
      width: 148px;
      display: inline-block;
    }
  }
  .inputline .line a {
    color: #fe8432;
  }

  .inputline .line b {
    color: #0078ff;
  }
  .line_type span:before {
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0px;
    top: 11px;
    background: url("~@/assets/images/common/work-team/checkbox.png") no-repeat
      0 0;
    content: "";
  }
  .line_type span.checked:before {
    background-position: 0 -12px;
  }
  .line_type {
    display: inline-block;
    margin-right: 38px;
    position: relative;
  }
  .line_type .checklabel {
    margin-left: 110px;
  }
  #checkinput {
    display: inline-block;
    margin-right: 38px;
    position: relative;
    margin-left: 0px;
  }
  #checkinput span {
    position: absolute;
    left: 280px;
    top: 2px;
    color: red;
    width: 70px;
    font-size: 12px;
  }
  .checktype {
    span {
      display: inline-block;
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      cursor: pointer;
    }
  }

  .reason {
    font-size: 0;
    label {
      width: 129px;
      display: inline-block;
      font-size: 14px;
      color: #666;
      text-align: right;
      padding-right: 10px;
      float: left;
    }
    textarea {
      display: inline-block;
      border: 1px solid #ececec;
      padding: 10px;
      width: 468px;
      resize: none;
      height: 80px;
    }
  }
  .radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
      height: 14px;
      line-height: 14px;
      float: left;
      margin-top: 10px;
      width: auto;
      margin-left: 0;
      li {
        margin-right: 40px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        padding-left: 22px;
        display: inline-block;
        background: url("~@/assets/images/common/radio.png") no-repeat -119px 0;
        float: left;
        width: auto;
      }
      li.selected {
        background-position: 0 0;
      }
      li.selected[type="cursor"] {
        cursor: default;
      }
    }
    label {
      width: 100px;
      padding-right: 10px;
      text-align: right;
      float: left;
      line-height: 34px;
      color: #666;
    }
  }
  .checkhide {
    background: #fafafa;
    border-left: 4px solid #fff;
    margin-top: 5px;
    padding: 12px 0;
    .hideline {
      height: 37px;
      line-height: 37px;
      margin-bottom: 15px;
      label {
        width: 180px;
        padding-right: 20px;
        text-align: right;
        display: inline-block;
        float: left;
      }
      .typeli {
        display: inline-block;
        position: relative;
        font-size: 0;
        float: left;
        span {
          width: 108px;
          line-height: 35px;
          background: #fff;
          height: 37px;
          border: 1px solid #ececec;
          text-align: center;
          color: #969696;
          display: inline-block;
          margin-right: 17px;
          font-size: 14px;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
        }
        span.hover {
          border-color: #16cb6d;
          background: #e0fdee;
          color: #16cb6d;
          position: relative;
          cursor: pointer;
        }
        span.hover:after {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 22px;
          height: 22px;
          display: block;
          content: "";
          background: url("~@/assets/images/common/work-team/task_select_ico.png")
            no-repeat 0 0;
        }
        input {
          line-height: 17px;
          padding: 10px;
          border: 1px solid #cacaca;
          width: 233px;
        }
        i {
          font-style: normal;
          color: #999;
          position: absolute;
          left: 243px;
          top: 0;
          line-height: 37px;
          font-size: 14px;
          width: 200px;
        }
      }
      &:last-child {
        margin: 0;
      }
    }
  }
}
</style>
